<template>
	<div class="announcement_list" v-loading="loading">
		<div class="list">
			<div class="item" v-for="(item, index) in announcementData" :key="index">
				<span>{{ item.releaseTime }}</span>
				<router-link class="link" :to="`/announcement/${item.id}`">{{ item.title }}</router-link>
			</div>
		</div>
		<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryAnnouncementData"></sw-pagination>
	</div>
</template>

<script>
import { tbSysJournalismQuery } from '@/api/system/tbSysJournalism';
export default {
	data() {
		return {
			loading: false,
			dataCount: 0,
			queryData: { page: 1, limit: 15 },
			announcementData: []
		};
	},
	mounted() {
		this.queryAnnouncementData();
	},
	methods: {
		async getAnnouncementData() {
			let params = { ...this.queryData, del: '1' };
			let result = await tbSysJournalismQuery(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.announcementData = result.data || [];
			}
		},

		queryAnnouncementData() {
			this.loading = true;
			this.getAnnouncementData();
		}
	}
};
</script>

<style lang="scss" scoped>
.announcement_list {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	.list {
		flex: 1;
		padding: 8px 16px;
		overflow: auto;
	}
	.item {
		font-size: 16px;
		padding: 12px 0;
		line-height: 24px;
		&::before {
			float: left;
			content: '';
			width: 6px;
			height: 6px;
			margin: 9px 9px 0 0;
			background-color: var(--primary-hover);
		}
		span {
			float: right;
			color: #909399;
			font-size: 16px;
		}
		a.link {
			color: #606266;
			font-size: 18px;
			&:hover {
				color: var(--primary);
				text-decoration: underline;
			}
		}
	}
	.el-pagination {
		padding: 16px;
		margin-top: 0;
		border-top: solid 1px #f2f6fc;
	}
}
</style>
